<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            border: 10px orange solid;
        /*
            内容区和边框之间的距离称为内边距
                共有四个方向的内边距：
                    padding-top 上内边距
                    padding-bottom 下内边距
                    padding-left 左内边距
                    padding-right 右内边距

                默认情况下，背景颜色会延伸到内边距上，
                    所以我们无法直观的看到内边距

                内边距也会影响到盒子可见框的大小

                一个元素的可见框的大小由：
                    内容区、内边距和边框共同决定

                padding简写属性，可以同时设置四个方向的内边距
                    10px 20px 30px 40px 上 右 下 左
                    10px 20px 30px 上 左右 下
                    10px 20px 上下 左右
                    10px 上下左右

        */
            /*padding-top: 100px;*/
            /*padding-right: 100px;*/
            /*padding-bottom: 100px;*/
            /*padding-left: 100px;*/

            padding: 10px 20px 30px 40px;
        }

        .inner{
            width: 100%;
            height: 100%;
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="inner"></div>
    </div>
</body>
</html>